<template>
  <div>
    <a-row :gutter='10'>
      <a-col :md='5' :sm='24'>
        <a-card :bordered='false'>
          <div style='background: #fff;padding-left:6px;height: 100%; margin-top: 5px'>
            <a-tree
              showLine
              :selectedKeys='selectedKeys'
              :checkStrictly='true'
              @select='onSelect'
              :dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
              :treeData='treeData'
              :autoExpandParent='autoExpandParent'
              :expandedKeys='iExpandedKeys'
              @expand='onExpand'
            />
          </div>
        </a-card>
      </a-col>
      <a-col :md='19' :sm='24'>
        <a-card :bordered='false'>
          <a-tabs default-active-key='1' @change="callback">
            <a-tab-pane key='1' tab='数据列表'>
              <!-- 查询区域 11111-->
              <div class='table-page-search-wrapper'>
                <a-form layout='inline' :label-col='labelCol' @keyup.enter.native='searchQuery'>
                  <a-row :gutter='24'>
                    <span style='float: left;overflow: hidden;' class='table-page-search-submitButtons'>
<!--                       <a-col :md='6' :sm='24'>-->
<!--                           <a-button type='primary' @click='searchQuery' icon='search'>查询</a-button>-->
<!--                           <a-button type='primary' @click='searchReset' icon='reload' style='margin-left: 8px'>重置</a-button>-->
<!--                       </a-col>-->
                    </span>
                  </a-row>
                </a-form>
              </div>
              <!-- table区域-begin -->
              <div>
                <a-table
                  ref='table'
                  size='middle'
                  bordered
                  rowKey='id'
                  :columns='columns'
                  :dataSource='dataSource'
                  :pagination='ipagination'
                  :loading='loading'
                  @change='handleTableChange'>

                      <span slot='action' slot-scope='text, record'>
                        <a @click='handleEdit(record)'>编辑</a>
                        <a-divider type='vertical' />
                        <a-dropdown>
                          <a class='ant-dropdown-link'>更多 <a-icon type='down' /></a>
                              <a-menu slot='overlay'>
                                    <a-menu-item>
                                      <a-popconfirm title='确定删除吗?' @confirm='() => handleDelete(record.id)'>
                                        <a>删除</a>
                                      </a-popconfirm>
                                    </a-menu-item>
                              </a-menu>
                        </a-dropdown>
                      </span>

                </a-table>
              </div>
            </a-tab-pane>
            <a-tab-pane key='2' tab='走势图' force-render>
              <div>
                <line-chart-multid title='' :height='height' :dataSource='dataSourceChart' :fields='fields'/>
              </div>
            </a-tab-pane>
          </a-tabs>
        </a-card>
      </a-col>
    </a-row>

  </div>

</template>
<script>
import '@/assets/less/TableExpand.less'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { putAction, getAction, postAction } from '@/api/manage'
import { frozenBatch, queryMyNurseCategoryTreeList, searchByKeywords } from '@/api/api'
import LineChartMultid from '@/components/chart/LineChartMultid.vue'

export default {
  name: 'h_his_nurse_service_projectList',
  mixins: [JeecgListMixin],
  components: {
    LineChartMultid
  },
  props: {
    patientId: Number,
  },
  watch: {
    patientId(newValue) {
      this.getPatient(newValue);
    }
  },
  data() {
    return {
      description: '动态健康数据页面',
      labelCol: { style: { width: '110px' } },
      queryParam: {
        keyCode: '',
        inputSource:""
      },
      height: 300,
      columns: [],
      url: {
        list: '/his/patient/healthy/data/list/member',
        columns: '/his/patient/healthy/data/column',
        lineList:'/his/patient/healthy/data/list/line/member'
      },
      iExpandedKeys: [],
      loading: false,
      autoExpandParent: true,
      disable: true,
      treeData: [],
      visible: false,
      hiding: true,
      model: {},
      depart: {},
      checkedKeys: [],
      selectedKeys: [],
      currentDeptId: 0,
      dataSourceChart:[

      ],
      fields:[],
      tabKey:1
    }
  },
  computed: {},
  created() {
    this.refresh()
    this.loadColumns()
  },
  methods: {
    getPatient(patientId){
      this.queryParam.patientId = patientId
    },
    loadColumns() {
      const that = this
      that.columns = []
      getAction(this.url.columns, { keyCode: this.queryParam.keyCode }).then((res) => {
        res.result.forEach(function(item, index) {
          that.columns.push(
            {
              title: item.title,
              dataIndex: item.dataIndex,
              align: 'center',
              width: item.width
            }
          )
        })
      })
    },
    callback(key) {
      this.tabKey=key;
      if(key==2){
        this.loadLine();
      }
    },
    loadLine(){
      const that=this;
      const params = this.getQueryParams();//查询条件
      getAction(this.url.lineList, params).then((res) => {
        that.fields=res.result.fields;
        that.dataSourceChart= res.result.dataSource;
      })
    },
    clearSelectedDepartKeys() {
      this.checkedKeys = []
      this.selectedKeys = []
      this.currentDeptId = ''
      this.$refs.DeptUserInfo.currentDeptId = ''
    },

    loadTree() {
      var that = this
      that.treeData = []
      that.departTree = []
      getAction('/his/patient/healthy/data/queryTreeList').then((res) => {
        if (res.success && res.result) {
          for (let i = 0; i < res.result.length; i++) {
            let temp = res.result[i]
            that.treeData.push(temp)
            that.setThisExpandedKeys(temp)
          }
          this.loading = false
        }
      })
    },
    setThisExpandedKeys(node) {
      //只展开一级目录
      if (node.children && node.children.length > 0) {
        this.iExpandedKeys.push(node.key)
      }
    },
    refresh() {
      this.loading = true
      this.loadTree()
    },

    onExpand(expandedKeys) {
      this.iExpandedKeys = expandedKeys
      this.autoExpandParent = false
    },
    onCheck(checkedKeys, e) {
      let record = e.node.dataRef
      this.checkedKeys = []
      this.currentDeptId = record.id
      this.checkedKeys.push(record.id)
      this.hiding = false
      this.queryParam.keyCode = record.id
    },
    onSelect(selectedKeys, e) {
      if (this.selectedKeys[0] !== selectedKeys[0]) {
        this.selectedKeys = [selectedKeys[0]]
      }
      let record = e.node.dataRef
      this.checkedKeys.push(record.id)
      this.queryParam.keyCode = record.id
      this.loadData()
      this.loadColumns()
      if(this.tabKey==2){
        this.loadLine();
      }
    },
    modalFormOk() {
      this.loadTree()
      // 新增/修改 成功时，重载列表
      this.loadData()
      this.loadLine();
      //清空列表选中
      this.onClearSelected();

    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>